.ConciseMode {
  @apply w-full flex-1 flex flex-col items-center overflow-hidden relative;

  .conciseModeSearch {
    @apply relative;
    transition: all 0.2s;

    @media screen and (max-width: 700px) {
      transition: all 0.2s;
    }

    .conciseModeInput {
      @apply rounded-xl;
      flex: none;
      padding: 16px 24px;
      width: 40vw;
      .appCompBgSm();
      transition: all 0.2s;
      margin-top: 20vh;


      @media screen and (min-width: 700px) {
        &:focus {
          padding: 20px 30px;
          width: 50vw;
        }
      }

      @media screen and (max-width: 700px) {
        margin-top: 24px;
        width: calc(100vw - 48px);
      }
    }
  }

  .suggestions {
    @apply mt-3 rounded-xl py-4 absolute left-0 right-0;
    .appCompBg();

    .suggestion {
      @apply py-2 px-4 cursor-pointer transition;

      &:hover {
        .appNearBgLg();
      }
    }
  }
}